<template>
	<div class="container" ref="refContainer">
		<div class="doc-content">
			<div class="title">输入框说明文档</div>
			<div class="sub-title quote">
				输入框组件包含 input、input-material<br>
				你只需要引入Input，即可使用两个组件
			</div>
			<div class="example-title">引入方式（按需）</div>
			<code-view>
				<template slot="code-js">{{ jsCode1 }}</template>
			</code-view>
			
			<div class="example-title">基础用法</div>
			<code-view>
				<template slot="code-html">{{ htmlCode2 }}</template>
			</code-view>
			
			<div class="example-title">禁用状态</div>
			<code-view>
				<template slot="code-html">{{ htmlCode3 }}</template>
			</code-view>
			
			<div class="example-title">密码框</div>
			<code-view>
				<template slot="code-html">{{ htmlCode4 }}</template>
			</code-view>
			
			<div class="example-title">Label标签</div>
			<code-view>
				<template slot="code-html">{{ htmlCode5 }}</template>
			</code-view>
			
			<div class="example-title">嵌入图标</div>
			<div class="example-sub-title quote">
				目前仅支持系统自带的图标，未来会支持自定义图标<br>
			</div>
			<code-view>
				<template slot="code-html">{{ htmlCode6 }}</template>
			</code-view>
			
			<div class="example-title">图标点击事件</div>
			<code-view>
				<template slot="code-html">{{ htmlCode13 }}</template>
				<template slot="code-js">{{ jsCode12 }}</template>
			</code-view>
			
			<div class="example-title">Material风格</div>
			<code-view>
				<template slot="code-html">{{ htmlCode7 }}</template>
			</code-view>
			
			<div class="example-title">禁用状态（Material风格）</div>
			<code-view>
				<template slot="code-html">{{ htmlCode8 }}</template>
			</code-view>
			
			<div class="example-title">密码框（Material风格）</div>
			<code-view>
				<template slot="code-html">{{ htmlCode9 }}</template>
			</code-view>
			
			<div class="example-title">Label标签（Material风格）</div>
			<code-view>
				<template slot="code-html">{{ htmlCode10 }}</template>
			</code-view>
			
			<div class="example-title">嵌入图标（Material风格）</div>
			<code-view>
				<template slot="code-html">{{ htmlCode11 }}</template>
			</code-view>
			
			<div class="example-title">图标点击事件（Material风格）</div>
			<code-view>
				<template slot="code-html">{{ htmlCode12 }}</template>
				<template slot="code-js">{{ jsCode12 }}</template>
			</code-view>
			
			<div class="example-title">输入框属性</div>
			<gr-table :width="800" :tableData="propertiesExplain" textAlign="left">
				<template v-slot="{rowData}">
					<gr-table-column label="参数名称" width="60">
						{{rowData.attrName}}
					</gr-table-column>
					<gr-table-column label="参数说明" width="150">
						{{rowData.introduce}}
					</gr-table-column>
					<gr-table-column label="类型" width="80">
						{{rowData.type}}
					</gr-table-column>
					<gr-table-column label="可选值" width="120">
						{{rowData.optionValues}}
					</gr-table-column>
					<gr-table-column label="默认值" width="60">
						{{rowData.defaultValue}}
					</gr-table-column>
				</template>
			</gr-table>
			
			<div class="example-title">输入框事件</div>
			<gr-table :width="800" :tableData="propertiesExplain2" textAlign="left">
				<template v-slot="{rowData}">
					<gr-table-column label="事件名称" width="100">
						{{rowData.attrName}}
					</gr-table-column>
					<gr-table-column label="事件说明" width="150">
						{{rowData.introduce}}
					</gr-table-column>
					<gr-table-column label="事件回调参数" width="120">
						{{rowData.param}}
					</gr-table-column>
				</template>
			</gr-table>
			<br>
			<div class="alert">
				<p class="alert">注意事项</p>
				<p>理论上，<span class="danger">icon-click</span>
				事件针对所有嵌入图标有效，当你同时添加了
				<span class="success">prefix-icon</span>
				和
				<span class="success">suffix-icon</span>
				，相当于两个图标绑定了同一个单击事件，这可能是个BUG，也可能不是。因为给输入框同时添加左右两个图标实在有点太蠢了，希望你不会这么做^_^</p>
			</div>
			<br>
			<br>
			<br>
			<br>
			<br>
		</div>
		<div class="demo-view">
			<div ref="refCellPhone" class="cellphone">
				<iframe src="demo.html#/inputdemo" frameborder="0" width="100%" height="100%"></iframe>
			</div>
		</div>
	</div>
</template>

<script>
	import Demo from '../components/Demo.vue'
	import CodeView from '../components/CodeView.vue'
	export default {
		components: {
			Demo,
			CodeView
		},
		data() {
			return {
				jsCode1: `import {Input} from 'gabriel-ui'
Vue.use(Input)`,
				htmlCode2: `<gr-input v-model='username' />`,
				htmlCode3: `<gr-input v-model='username' disabled />`,
				htmlCode4: `<gr-input v-model='pwd' password />`,
				htmlCode5: `<gr-input v-model='tel01' password leftLabel="密码" />
<gr-input v-model='tel02' password rightLabel="密码" />`,
				htmlCode6: `<gr-input v-model="username" prefix-icon="search"/>
<gr-input v-model="username" suffix-icon="zhongliang" />`,
				htmlCode7: `<gr-input-material v-model="username" />`,
				htmlCode8: `<gr-input-material disabled />`,
				htmlCode9: `<gr-input-material v-model="username" password label="密码" />`,
				htmlCode10: `<gr-input-material v-model="username" label="职位" />`,
				htmlCode11: `<gr-input-material v-model="username" prefix-icon="search" />
<gr-input-material v-model="user" suffix-icon="zhongliang" />`,
				htmlCode12: `<gr-input-material v-model="user" suffix-icon="search" @icon-click="click" />`,
				jsCode12: `export default {
	methods: {
		click() {
			this.$toast.show('您点击了图标')
		}
	}
}`,
				htmlCode13: `<gr-input v-model="username" prefix-icon="search" @icon-click="click" />`,
				propertiesExplain: [
					{
						attrName: 'v-model',
						introduce: `绑定的value值`,
						type: 'String/Number/Boolean',
						optionValues: '----',
						defaultValue: 'default'
					},
					{
						attrName: 'password',
						introduce: `是否为密码框，在密码框状态下，会自动增加可视按钮`,
						type: 'Boolean',
						optionValues: 'true / false',
						defaultValue: 'false'
					},
					{
						attrName: 'disabled',
						introduce: `是否禁用输入框`,
						type: 'Boolean',
						optionValues: 'true / false',
						defaultValue: 'false'
					},
					{
						attrName: 'leftLabel',
						introduce: `输入框左边标签内容`,
						type: 'String',
						optionValues: '----',
						defaultValue: '----'
					},
					{
						attrName: 'rightLabel',
						introduce: `输入框右边标签内容`,
						type: 'String',
						optionValues: '----',
						defaultValue: '----'
					},
					{
						attrName: 'prefix-icon',
						introduce: `输入框左侧图标`,
						type: 'String',
						optionValues: '----',
						defaultValue: '----'
					},
					{
						attrName: 'suffix-icon',
						introduce: `输入框右侧图标`,
						type: 'String',
						optionValues: '----',
						defaultValue: '----'
					}
				],
				propertiesExplain2: [
					{
						attrName: 'icon-click',
						introduce: `嵌入图标的点击事件`,
						param: '输入框的value值'
					},
					{
						attrName: 'click',
						introduce: `输入框的点击事件`,
						param: 'event事件对象'
					}
				]
			}
		},
		mounted() {
			let ele = this.$refs.refCellPhone
			this.$refs.refContainer.addEventListener('scroll', (e)=> {
				ele.style.top = e.target.scrollTop + 'px';
			})
		}
	}
</script>

<style>
</style>
